<script setup lang="ts">
import type { tagItem } from '@/types/page/img'
type PropsState = {
  list: tagItem[]
}
withDefaults(defineProps<PropsState>(), {
  list: () => []
})
</script>

<template>
  <div class="tags-detail" v-if="list.length > 0">
    <div
      class="tag"
      v-for="item in list"
      :key="item.name"
      :style="{ background: item.background, color: item.color }"
    >
      <i class="esayIcon esayIcon-biaoqian"></i>
      <span>{{ item.name }}</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.tags-detail {
  padding: 16px 10px 10px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  .tag {
    padding: 2px 10px;
    border-radius: 5px;
    cursor: pointer;
    i {
      font-size: 12px;
    }
    span {
      font-size: 13px;
      padding-left: 4px;
    }
  }
}
</style>
